<template>
  <div class="app-container">
      <!-- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
                      <el-form-item label="R_Code" prop="id">
                          <el-input
                                  v-model="queryParams.id"
                                  placeholder="请输入R_Code"
                                  clearable
                                  @keyup.enter="handleQuery"
                                  style="width: 180px;"
                          />
                      </el-form-item>
                      <el-form-item label="描述" prop="description">
                          <el-input
                                  v-model="queryParams.description"
                                  placeholder="请输入描述"
                                  clearable
                                  @keyup.enter="handleQuery"
                                  style="width: 180px;"
                          />
                      </el-form-item>

                      <el-form-item label="设备状态" prop="machineStatusType">
                          <el-input
                                  v-model="queryParams.machineStatusType"
                                  placeholder="请输入设备状态"
                                  clearable
                                  @keyup.enter="handleQuery"
                                  style="width: 180px;"
                          />
                      </el-form-item>
          <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
      </el-form> -->

      <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
              <el-button
                      type="primary"
                      plain
                      icon="Plus"
                      @click="handleAdd"
                      v-hasPermi="['SYSConfig:machineStatus:add']"
              >新增</el-button>
          </el-col>
          <el-col :span="1.5">
              <el-button
                      type="success"
                      plain
                      icon="Edit"
                      :disabled="single"
                      @click="handleUpdate"
                      v-hasPermi="['SYSConfig:machineStatus:edit']"
              >修改</el-button>
          </el-col>
          <el-col :span="1.5">
              <el-button
                      type="danger"
                      plain
                      icon="Delete"
                      :disabled="multiple"
                      @click="handleDelete"
                      v-hasPermi="['SYSConfig:machineStatus:remove']"
              >删除</el-button>
          </el-col>
          <el-col :span="1.5">
              <el-button
                      type="warning"
                      plain
                      icon="Download"
                      @click="handleExport"
                      v-hasPermi="['SYSConfig:machineStatus:export']"
              >导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <t-ag-grid
          :style="{height: height}"
          :column-defs="column"
          :row-data="machineStatusList"
          :row-buffer="20"
          row-selection="multiple"
          :suppress-row-click-selection="true"
          :row-multi-select-with-click="true"
          align="center"
          header-align="center"
          :defaultColDef = "{
              menuTabs: ['filterMenuTab', 'columnsMenuTab']
          }"
          @selection-changed="selectionChanged"
          />

      <pagination
              v-show="total>0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
      />

      <!-- 添加或修改EPT状态规则对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
          <el-form ref="machineStatusRef" :model="form" :rules="rules" label-width="80px">
                              <el-form-item label="描述" prop="description">
                                  <el-input v-model="form.description" placeholder="请输入描述" />
                              </el-form-item>
                              <el-form-item label="启停状态" prop="machineStatusRule">
                                  <el-input v-model="form.machineStatusRule" placeholder="请输入启停状态" />
                              </el-form-item>
                              <el-form-item label="颜色" prop="color">
                                  <el-input v-model="form.color" placeholder="请输入颜色" />
                              </el-form-item>
                              <el-form-item label="优先级" prop="level">
                                  <el-input v-model="form.level" placeholder="请输入优先级" />
                              </el-form-item>
                              <el-form-item label="备注" prop="remark">
                                  <el-input v-model="form.remark" placeholder="请输入备注" />
                              </el-form-item>
          </el-form>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="submitForm">确 定</el-button>
                  <el-button @click="cancel">取 消</el-button>
              </div>
          </template>
      </el-dialog>
  </div>
</template>

<script setup name="MachineStatus">
  import { listMachineStatus, getMachineStatus, delMachineStatus, addMachineStatus, updateMachineStatus } from "@/api/SYSConfig/machineStatus"

  const { proxy } = getCurrentInstance()

  const machineStatusList = ref([])
  const open = ref(false)
  const loading = ref(true)
  const showSearch = ref(true)
  const ids = ref([])
  const single = ref(true)
  const multiple = ref(true)
  const total = ref(0)
  const title = ref("")

  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10000,
      id: null,
      description: null,
      machineStatus: null
    },
    rules: {
    }
  })

  const { queryParams, form, rules } = toRefs(data)

  const height = ref('calc(100% - 67px)')

  const cellStyle = (params) => {
    return {
      background: params.value
    }
  }

  const cellRenderer = (params) => {
    return `<div style="background: ${params.value}; width: 90%; height: 68%; margin: 5px"></div>`
  }

  const column = [
    { headerName: "R_Code", field: "id", headerCheckboxSelection: true, checkboxSelection: true, minWidth: 100, flex: 1 },
    { headerName: "描述", field: "description", minWidth: 100, flex: 1 },
    { headerName: "设备状态", field: "machineStatus", minWidth: 100, flex: 1 },
    { headerName: "固件状态", field: "machineHardwareStatus", minWidth: 100, flex: 1 },
    { headerName: "通讯状态", field: "machineProcessStatus", minWidth: 100, flex: 1 },
    { headerName: "状态分类", field: "machineStatusType", minWidth: 100, flex: 1 },
    { headerName: "颜色", field: "color", minWidth: 100, flex: 1, cellRenderer },
    { headerName: "优先级", field: "level", minWidth: 100, flex: 1 },
    { headerName: "备注", field: "remark", minWidth: 150, flex: 1 },
    { headerName: "更新人", field: "updateUser", minWidth: 100, flex: 1 },
    { headerName: "更新时间", field: "updateTime", minWidth: 100, flex: 1 }
  ]

  column.forEach((item) => {
    item.filter = 'agMultiColumnFilter'
  })

  const gridApi = ref()

  const selectionChanged  = (params) => {
    gridApi.value = params.api
    const selectedRows = params.api.getSelectedRows()
    single.value = selectedRows.length !== 1
    multiple.value = !selectedRows.length
  }

  /** 查询EPT状态规则列表 */
  function getList() {
    loading.value = true
    listMachineStatus(queryParams.value).then(response => {
      machineStatusList.value = response.rows
      total.value = response.total
      loading.value = false
    })
  }

  // 取消按钮
  function cancel() {
    open.value = false
    reset()
  }

  // 表单重置
  function reset() {
    form.value = {
      id: null,
      updateBy: null,
      updateTime: null,
      description: null,
      machineHardwareStatus: null,
      machineStatusRule: null,
      machineStatus: [],
      machineStatusType: null,
      color: null,
      level: null,
      remark: null,
      machineProcessStatus: null
    }
    proxy.resetForm("machineStatusRef")
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.value.pageNum = 1
    getList()
  }

  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef")
    handleQuery()
  }

  /** 新增按钮操作 */
  function handleAdd() {
    reset()
    open.value = true
    title.value = "添加EPT状态规则"
  }

  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset()
    const _id = gridApi.value.getSelectedRows()[0].id
    getMachineStatus(_id).then(response => {
      form.value = response.data
      form.value.machineStatus = form.value.machineStatus.split(",")
      open.value = true
      title.value = "修改EPT状态规则"
    })
  }

  /** 提交按钮 */
  function submitForm() {
    proxy.$refs["machineStatusRef"].validate(valid => {
      if (valid) {
        form.value.machineStatus = form.value.machineStatus.join(",")
        if (form.value.id != null) {
          updateMachineStatus(form.value).then(response => {
            proxy.$modal.msgSuccess("修改成功")
            open.value = false
            getList()
          })
        } else {
          addMachineStatus(form.value).then(response => {
            proxy.$modal.msgSuccess("新增成功")
            open.value = false
            getList()
          })
        }
      }
    })
  }

  /** 删除按钮操作 */
  function handleDelete(row) {
    const _ids = []
    gridApi.value.getSelectedRows().map(item => _ids.push(item.id) )
    proxy.$modal.confirm('是否确认删除EPT状态规则编号为"' + _ids + '"的数据项？').then(function() {
      return delMachineStatus(_ids)
    }).then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    }).catch(() => {})
  }

  /** 导出按钮操作 */
  function handleExport() {
    proxy.download('SYSConfig/machineStatus/export', {
      ...queryParams.value
    }, `machineStatus_${new Date().getTime()}.xlsx`)
  }

  getList()
</script>
